<template>
	<view class="moment-list base-maxwidth">
		<view v-for="(item,index) in momentList" :key="index">
			<view class="moment-item" @click="momentItemClick(item)">
				<view class="user-info">
					<image class="avatar" src="https://img.zcool.cn/community/01654e5c824404a80120af9a9b6667.jpg@2o.jpg"></image>
					<view class="user-name">
						<text class="name">{{item.username}}</text>
						<text class="publish-time"><text>发布于</text>{{item.pulish_time}}</text>
					</view>
				</view>
				<view class="moment-content">
					<view class="title">今天天气是真的不错</view>
					<view class="desc">小狗你快长大了</view>
					<view :class="[item.images.length < 2 ? 'img-list' : 'img-list2']">
						<view v-for="(imgItem, index) in item.images" :key="index" class="item">
							<image class="img" :src="imgItem" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<interrace-btn></interrace-btn>
			</view>
		</view>
	</view>
</template>

<script>
	import interraceBtn from '@/components/interractBtn/interaceBtn.vue'
	export default {
		components: {
			interraceBtn
		},
		data() {
			return {				
				
			}
		},
		props: {
			tabIndex: Number,
			default: 0,
			momentList: {
				type: Array,
				default: []
			}
		},
		methods: {
			momentItemClick(item) {
				console.log(item)
				uni.navigateTo({
					url: '/subpages/postDetail/postDetail?item='+item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.moment-list {
		margin-top: 10px;
	}
	
	.moment-item {
		margin-bottom: 10px;
		border-radius: 12px;
		background-color: #fff;
		box-sizing: border-box;
		padding: 15px 0 15px 10px;
	}
	.moment-item .user-info {
		display: flex;
		align-items: center;
		height: 100%;
	}
	
	.moment-item .user-info .avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	
	.moment-item .user-name {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 40px;
		margin-left: 8px;
	}
	
	.user-info .user-name .name {
		font-size: 14px;
		color: #323232;
	}
	
	.moment-item .user-name .publish-time {
		font-size: 12px;
		color: #bababa;
	}
	
	.moment-item .moment-content {
		margin-bottom: 15px;
		.title {
			font-size: 16px;
			font-weight: 600;
			margin: 6px 0;
		}
		
		.desc {
			margin-bottom: 10px;
		}
		
		.img-list {
			display: flex;
			width: 100%;
			.item .img {
				max-width: 100%;
				border-radius: 10px;
				overflow: hidden;
			}
		}
		.img-list2 {
			display: flex;
			justify-content: flex-start;
			width: 100%;
			.item {
				width: 32%;
				height: 221rpx;
				border-radius: 6px;
				overflow: hidden;
			}
			
			.item:nth-child(1),
			.item:nth-child(2){
				margin-right: 6rpx;
			}
			
			.item .img {
				max-width: 100%;
				max-height: 100%;
			}
		}
		
	}
	
	 /deep/ .interace-btn {
		justify-content: space-between;
	} 
	
</style>